<template>
  <div id="comment">
    <template v-for="item in commentArr">
      <div :key="item.commentId" class="cm-list">
        <div class="left">
          <img :src="item.user.avatarUrl" />
        </div>
        <div class="right">
          <div class="top">
            <ul>
              <li>{{ item.user.nickname }}</li>
              <li>
                {{ new Date(item.time).getFullYear() }}年{{
                  new Date(item.time).getMonth() + 1
                }}月{{ new Date(item.time).getDate() }}日
              </li>
            </ul>
            <p>{{ item.likedCount }} <span class="iconfont icon-zan"></span></p>
          </div>
          <div class="text">
            {{ item.content }} 
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: ["commentArr"],
};
</script>
<style lang="scss" scoped>
#comment {
  .cm-list {
    width: _vw(750);
    display: flex;
    justify-content: space-between;
    .left {
      width: _vw(100);
      text-align: center;
      img {
        width: _vw(60);
        border-radius: 50%;
        margin-top: _vw(15);
      }
    }
    .right {
      width: _vw(650);
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: _vw(95);
        ul {
          li {
            font-size: _vw(30);
            &:last-child {
              margin-top: _vw(3);
              color: #999999;
              font-size: _vw(25);
            }
          }
        }
        p{
          color: rosybrown;
          font-size: _vw(18);
        }
      }
      border-bottom: 1px solid #e5e5e5;
      padding-right: _vw(15);
      padding-bottom: _vw(15);
    }
  }
}
</style>